var lists = [
    {
        img: 'vans.jpg',
        title: 'Vans范斯 经典系列 Old Skool板鞋运动鞋 低帮经典款男女官方正品',
        id: 2001,
        size: '37',
        oriPrice: 399.99,
        nowPrice: 299.98
    },
    {
        img: 'bag.png',
        title: 'Gucci Dressage Original GG Ganvas Tote Bag 296850 Coffe',
        id: 24234,
        size: 'Defalt',
        oriPrice: 180.96,
        nowPrice: 120.69
    },
    {
        img: 'converse.jpg',
        title: 'CONVERSE匡威官方 Batman 80th 蝙蝠侠80周年联名 高帮 167303C',
        id: 32001,
        size: '37',
        oriPrice: 259.98,
        nowPrice: 209.48
    },
    {
        img: 'bsdon.jpg',
        title: '波司登冬季新款大毛领羽绒服女中长款厚款防寒冬天外套B80141038',
        id: 5884,
        size: '160/84A',
        oriPrice: 1399.99,
        nowPrice: 1099.30
    },
    {
        img: 'olay.jpg',
        title: 'Olay玉兰油大红瓶新生塑颜金纯面霜50g 补水保湿修护紧致护肤霜女',
        id: 6854,
        size: '50g/ml',
        oriPrice: 268.00,
        nowPrice: 200.00
    }
]

let shops = document.querySelector('.shopS');  //获取tbody

//渲染数据到页面
lists.forEach(function (items, index) {
    shops.innerHTML += `<tr class="shopList">
    <td class="imgTd"><img class="shops" src="../images/${items.img}" alt="" srcset=""></td>
    <td class="titleTd">
        <h6>${items.title}</h6>
        <span>ID${items.id}</span>
        <span>Size${items.size}</span>
    </td>
    <td class="Son2">
        <span class="reduce">-</span>
        <input type="text" value="1" class="count">
        <span class="add">+</span>
    </td>
    <td class="Son3">
        <del class="oriPrice" pic="${items.oriPrice}">${items.oriPrice} py6</del>
        <b class="nowPrice" pic="${items.nowPrice}">${items.nowPrice} py6</b>
    </td>
    <td class="Son4">
        <span class="priceAll">399.99 py6</span>
        <span class="saveAll">You save 100.01 py6</span>
    </td>
    <td class="Son5">
        <img class="del" src="../images/del.png" alt="">
    </td>
</tr>`;
});


//模板字符串

/*let str = `<tr class="shopList">
                <td class="imgTd"><img class="shops" src="../images/${items.img}" alt="" srcset=""></td>
                <td class="titleTd">
                    <h6>${items.title}</h6>
                    <span>ID${items.id}</span>
                    <span>Size${items.size}</span>
                </td>
                <td class="Son2">
                    <span class="reduce">-</span>
                    <input type="text" value="1" class="count">
                    <span class="add">+</span>
                </td>
                <td class="Son3">
                    <del class="oriPrice">${items.oriPrice} py6</del>
                    <b class="nowPrice">${items.nowPrice} py6</b>
                </td>
                <td class="Son4">
                    <span class="priceAll">399.99 py6</span>
                    <span class="saveAll">You save 100.01 py6</span>
                </td>
                <td class="Son5">
                    <img class="del" src="../images/del.png" alt="">
                </td>
            </tr>`;
*/

let shoplist = document.querySelector('.shopList');     //获取class为shopList的tr
let count = document.querySelector('.count');           //获取input
//let counts = count.value - 0;                               //input的value值，即商品数量
// let res = lists.reduce(function (pre, cur, index) {
//     return pre + cur.nowPrice * cur.count.value;
// }, 0)

//console.log(counts);

let res = lists.reduce(function(pre,cur,index){
    cur.nowPrice * cur.counts;
},0)

let re = document.querySelectorAll('.reduce');  //获取减
let add = document.querySelectorAll('.add');    //获取加

re.forEach(function (items, index){
    items.onclick = function() {
        // console.log(this);
        let numIpt = this.nextElementSibling;
        let oldVal = numIpt.value;

        if(oldVal > 0) {
            numIpt.value = oldVal - 1;
        }
    }
})

add.forEach(function (items, index){
    items.onclick = function() {
        // console.log(this);
        let numIpt = this.previousElementSibling;
        let oldVal = numIpt.value;
        numIpt.value = oldVal - 0 + 1;
        let all = getAllPic('.nowPrice');
        let cj = getAllPic('.oriPrice') - all;

        allPic.innerText = all.toFixed(2);
        cjPic.innerText = cj.toFixed(2);
    }
})

let getAllPic = (className) => {
    let picNodes = document.querySelectorAll(className);
    let pic = 0;

    for(let i in picNodes) {
        let node = picNodes[i];

        if('object' === typeof(node)) {
            let num = node.parentNode.previousElementSibling.querySelector('.count').value;
            pic += node.getAttribute('pic') * num;
        }
    }

    return pic;
}

// let sum = (num) => {
//     let number = count.value - 0 + num;
//     count.value = number;
// }
// re.onclick = function() {sum(-1);}

// add.onclick = function() {sum(1);}